<script setup>
import { ref } from 'vue'

const dreamSymbols = {
  nature: [
    { name: '森林', meaning: '象征潜意识和内心世界的探索' },
    { name: '海洋', meaning: '代表情感深度和未知的可能' },
    { name: '山峰', meaning: '暗示目标和抱负' }
  ],
  objects: [
    { name: '钥匙', meaning: '代表新的机会或解决方案' },
    { name: '门', meaning: '象征转变和新的开始' },
    { name: '镜子', meaning: '反映自我认知和内心真实' }
  ],
  actions: [
    { name: '飞行', meaning: '代表自由和超越限制' },
    { name: '追逐', meaning: '暗示内心的渴望或恐惧' },
    { name: '寻找', meaning: '象征自我探索和人生目标' }
  ]
}

const currentDream = ref({
  content: '',
  symbols: [],
  emotions: [],
  analysis: null
})

const selectedSymbols = ref([])
const emotionLevel = ref(50)
const isAnalyzing = ref(false)

const emotions = [
  { name: '喜悦', color: '#ffd93d' },
  { name: '平静', color: '#4ecdc4' },
  { name: '焦虑', color: '#ff6b6b' },
  { name: '神秘', color: '#6b4bff' }
]

const analyzeResult = ref(null)

const startAnalysis = () => {
  isAnalyzing.value = true
  // 模拟分析过程
  setTimeout(() => {
    analyzeResult.value = {
      mainTheme: '自我探索与成长',
      symbolAnalysis: [
        { symbol: '森林', interpretation: '你正在经历一段内心探索的旅程' },
        { symbol: '光芒', interpretation: '象征着即将到来的启示或顿悟' }
      ],
      emotionalInsights: '梦境中的情绪显示你正处于一个转变期',
      guidance: '建议保持开放和接纳的心态，倾听内心的声音'
    }
    isAnalyzing.value = false
  }, 2000)
}
</script>

<template>
  <div class="dream-analyzer">
    <div class="analyzer-container">
      <!-- 左侧输入区域 -->
      <div class="input-section dream-card">
        <h2 class="section-title">梦境解析</h2>
        
        <!-- 梦境描述 -->
        <div class="form-group">
          <label>描述你的梦境</label>
          <textarea 
            v-model="currentDream.content"
            class="dream-input"
            rows="6"
            placeholder="详细描述你的梦境内容..."
          ></textarea>
        </div>

        <!-- 符号选择 -->
        <div class="symbols-section">
          <label>选择出现的符号</label>
          <div class="symbols-categories">
            <div 
              v-for="(symbols, category) in dreamSymbols"
              :key="category"
              class="symbol-category"
            >
              <h4>{{ category }}</h4>
              <div class="symbols-grid">
                <button 
                  v-for="symbol in symbols"
                  :key="symbol.name"
                  :class="['symbol-btn', selectedSymbols.includes(symbol.name) ? 'active' : '']"
                  @click="selectedSymbols.includes(symbol.name) 
                    ? selectedSymbols = selectedSymbols.filter(s => s !== symbol.name)
                    : selectedSymbols.push(symbol.name)"
                >
                  {{ symbol.name }}
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 情绪选择 -->
        <div class="emotions-section">
          <label>主要情绪</label>
          <div class="emotions-grid">
            <button 
              v-for="emotion in emotions"
              :key="emotion.name"
              class="emotion-btn"
              :style="{ '--emotion-color': emotion.color }"
            >
              {{ emotion.name }}
            </button>
          </div>
          <div class="emotion-intensity">
            <label>情绪强度</label>
            <input 
              v-model="emotionLevel"
              type="range"
              min="0"
              max="100"
              class="dream-range"
            >
            <span>{{ emotionLevel }}%</span>
          </div>
        </div>

        <button 
          class="dream-btn analyze-btn"
          @click="startAnalysis"
          :disabled="isAnalyzing"
        >
          <span>🔮</span>
          {{ isAnalyzing ? '正在解析...' : '开始解析' }}
        </button>
      </div>

      <!-- 右侧分析结果 -->
      <div class="analysis-section">
        <div v-if="isAnalyzing" class="analyzing-state dream-card">
          <div class="crystal-ball">
            <div class="crystal-glow"></div>
          </div>
          <p>正在解析梦境...</p>
        </div>

        <template v-else-if="analyzeResult">
          <div class="analysis-result dream-card">
            <h3>主题解析</h3>
            <p class="main-theme">{{ analyzeResult.mainTheme }}</p>
            
            <div class="symbol-interpretations">
              <h4>符号解读</h4>
              <div 
                v-for="(item, index) in analyzeResult.symbolAnalysis"
                :key="index"
                class="interpretation-item"
              >
                <span class="symbol-name">{{ item.symbol }}</span>
                <p>{{ item.interpretation }}</p>
              </div>
            </div>

            <div class="emotional-analysis">
              <h4>情感洞察</h4>
              <p>{{ analyzeResult.emotionalInsights }}</p>
            </div>

            <div class="guidance-section">
              <h4>指引建议</h4>
              <p>{{ analyzeResult.guidance }}</p>
            </div>
          </div>

          <div class="additional-insights dream-card">
            <h3>深层解读</h3>
            <div class="insights-grid">
              <div class="insight-card">
                <span class="insight-icon">🌟</span>
                <h4>潜意识暗示</h4>
                <p>梦境反映了你内心深处的渴望和担忧</p>
              </div>
              <div class="insight-card">
                <span class="insight-icon">🎯</span>
                <h4>现实映射</h4>
                <p>与当前生活状态有密切关联</p>
              </div>
              <div class="insight-card">
                <span class="insight-icon">🌈</span>
                <h4>发展方向</h4>
                <p>指引未来可能的发展路径</p>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<style scoped>
.dream-analyzer {
  padding: 1rem;
}

.analyzer-container {
  display: grid;
  grid-template-columns: 450px 1fr;
  gap: 2rem;
}

.input-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.symbols-section, .emotions-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.symbols-categories {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.symbol-category h4 {
  color: var(--text-primary);
  margin-bottom: 0.8rem;
  font-size: 1rem;
}

.symbols-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.symbol-btn {
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.3s ease;
}

.symbol-btn:hover {
  background: rgba(107, 75, 255, 0.1);
  border-color: rgba(107, 75, 255, 0.2);
}

.symbol-btn.active {
  background: var(--primary-color);
  color: white;
  border-color: transparent;
}

.emotions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
}

.emotion-btn {
  padding: 0.8rem;
  border: none;
  border-radius: 12px;
  background: var(--emotion-color);
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.emotion-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.emotion-intensity {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.analyze-btn {
  margin-top: auto;
  font-size: 1.1rem;
  justify-content: center;
}

/* 分析结果样式 */
.analyzing-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  text-align: center;
}

.crystal-ball {
  width: 100px;
  height: 100px;
  background: rgba(107, 75, 255, 0.2);
  border-radius: 50%;
  position: relative;
  margin-bottom: 1.5rem;
  animation: float 3s infinite ease-in-out;
}

.crystal-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  background: rgba(107, 75, 255, 0.4);
  border-radius: 50%;
  animation: glow 2s infinite ease-in-out;
}

.analysis-result {
  margin-bottom: 2rem;
}

.main-theme {
  font-size: 1.2rem;
  color: var(--primary-color);
  margin: 1rem 0;
  padding: 1rem;
  background: rgba(107, 75, 255, 0.1);
  border-radius: 12px;
}

.symbol-interpretations {
  margin: 1.5rem 0;
}

.interpretation-item {
  margin: 1rem 0;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

.symbol-name {
  color: var(--secondary-color);
  font-weight: 500;
  margin-bottom: 0.5rem;
  display: block;
}

.insights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

.insight-card {
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  text-align: center;
}

.insight-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  display: block;
}

h3, h4 {
  color: var(--text-primary);
  margin-bottom: 1rem;
}

p {
  color: var(--text-secondary);
  line-height: 1.6;
}

label {
  color: var(--text-primary);
  font-weight: 500;
}
</style> 